<template>
	<view class="category">
		<!-- 搜索 -->
		<!-- #ifdef APP-PLUS -->
		<div class="status-bar" :style="{height:statusBarHeight+'px'}"></div>
		<!-- #endif -->
		<view class="search">
			<search class="w-100"></search>
		</view>
		
		<view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 140px)">
				<view class="cu-item text-sm" :class="index==tabCur?'text-green cur':''" 
				v-for="(categoryType_item,index) in categoryType" :key="index" @tap="TabSelect"
				 :data-id="index">
					{{categoryType_item.name}}
				
				</view>
				
			
			</scroll-view>
			<scroll-view class="padding-sm" scroll-y scroll-with-animation style="width: calc(100% - 110px); height:calc(100vh - 140px)"
			 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
				 <view class="type_head">
					<view class="type_head_item text-center text-xs" v-for="(type,index) in subPoiCategories" 
					:class="type.id==tabTypeCur?'type_head_item_cur':''" @tap="TabTypeSelect"  :key="index":data-id="type.id">
						<view class="">{{type.name}}</view>
					</view>
				 </view>
				 
				 <view class="type_good">
				 	<goodList style="width: 100%; background-color: #FFFFFF;" :propsList = "cateGood"  ></goodList>
				 </view>
				
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import search from "../../commponent/public/search";
	import goodList from '../../commponent/home/goodList';
	import jsonData from "../../../json.js"

	export default {
		data() {
			return {
				
				mainCur: 0,
				tabCur: 0,
				categoryType:[], //分类	
				verticalNavTop: 0,	
				
				subPoiCategories:[],  //二级分类
				tabTypeCur:0, //二级分类选中id
				
				cateGood:[],

					
				bottoms: '100',
				showHeader: false, //判断当前终端是APP还是h5
				classLevel: true, //控制显示分类菜单  true：二级分类菜单   false：三级分类菜单
				colors: "",
				current: "",
				scrollTop: "",
				statusBarHeight: 20,
				
			
			
				currentTwo: 0,
				currentThere: 0
			};
		},

		components: {
			search,
			goodList
		},

		
		mounted() {
			
			this.cateGood = jsonData.cateGood
			
			
			console.log(jsonData.categoryType)
			this.categoryType = jsonData.categoryType
			
			this.subPoiCategories = this.categoryType[this.tabCur].subPoiCategories
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// #ifdef APP-PLUS
			this.showHeader = true   //在APP端对样式进行调整
			this.bottoms = '0'  //在APP下 规格弹窗的位置发生变化
			// #endif
			
			
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.setData({
				colors: app.globalData.newColor
			});
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			TabSelect(e) {
				console.log(e)

				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50;
				
				
				
				this.subPoiCategories = this.categoryType[this.tabCur].subPoiCategories
			},
			TabTypeSelect(e) {
				console.log(e)
				this.tabTypeCur = e.currentTarget.dataset.id;
			},

			VerticalMain(e) {
				
				// #ifdef MP-ALIPAY
				   return false  //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.categoryType.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.categoryType[i].id);
						view.fields({
							size: true
						}, data => {
							this.categoryType[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.categoryType[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.categoryType.length; i++) {
					if (scrollTop > this.categoryType[i].top && scrollTop < this.categoryType[i].bottom) {
						this.verticalNavTop = (this.categoryType[i].id - 1) * 50
						this.tabCur = this.categoryType[i].id
						console.log(scrollTop)
						return false
					}
				}
			}
			
		}
	};
</script>
<style scoped lang="scss">
	.fixed {
		position: fixed;
		z-index: 99;
	}
	
	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}
	
	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #f1f1f1 ;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}
	
	.VerticalNav.nav .cu-item.cur {
		background-color: #fff;
	}
	
	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 50upx;
		border-radius: 0 10upx  10upx 0 ;
		position: absolute;
		background-color: #4BDA4D;
		top: 0;
		left: 0;
		bottom: 0;
		margin: auto;
	}
	
	.VerticalBox {
		display: flex;
	}
	
	.VerticalMain {
		background-color: #fff;
		flex: 1;
	}
	
	
	.category {
		background-color: #ffffff;
		position: fixed;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		top: 0;
		bottom: 0;
		z-index: 10;
	}
	.search {
		height: 70px;
		padding: 10upx 10upx;
		padding-left: 10upx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	
	
	.type_head{
		display: grid;
		grid-template-columns: repeat(3,33.33%);
		grid-gap: 10rpx;
	}
	.type_head_item{
		line-height: 65rpx;
		color: #000000;
		background-color: #F5F6F7;
		border-radius: 15rpx;
	}
	.type_head_item_cur{
		line-height: 65rpx;
		color: #1E9C3D;
		background-color: #E4FCDE;
		border-radius: 15rpx;
	}



</style>
